import * as echarts from 'echarts';
// import{ getDateRangeString } from '@/utils/func/util'
// import china from '@/json/china.json'
//应用启动总量-左上
export function getOptionsForAppAllPie(data) {
  let colorList = [
    "#329BFF",
    "#48DCF3",
    "#FFD042",
    "#F3488C",
    "#5F48F3",
    "#F39348", "#A048F3", "#48F3C1", "#F34848", "#48F381"];
  function generateRandomColorList(count) {
    const colorList = [];
    for (let i = 0; i < count; i++) {
      const r = Math.floor(Math.random() * 256);
      const g = Math.floor(Math.random() * 256);
      const b = Math.floor(Math.random() * 256);
      colorList.push(`rgb(${r},${g},${b})`);
    }
    return colorList;
  }
  // 超出制定颜色多余生成随机颜色
  if (data.length > 10) colorList = colorList.concat(generateRandomColorList(data.length - 10))
  const option = {
    title: {
      text: '',
      x: 'center',
      y: '25%',
      textStyle: { // 主标题样式
        fontSize: '20',
        color: '#fff',
        fontweight: 'bold'
      },
    },
    tooltip: {
      backgroundColor: "rgba(0,0,0,0)",
      borderColor: "rgba(0,0,0,0)",
      triggerOn: "mousemove",
      enterable: true,
      shadowBlur: 0,
      shadowColor: 'rgba(0, 0, 0, 0)',
      padding: [0],
      trigger: "item",
      textStyle: {
        color: '#fff', // 文本颜色
        fontSize: 24, // 文本大小
        fontWeight: 500,
      },
      formatter: "<span style='font-size:16px;'>{b}</span> <br/><span style='display:inline-blank;position:relative;top:-10px;'>{d}%</span>",
      position: function (point, params, dom, rect, size) {
        // 提示框位置
        let x, y
        // 当前鼠标位置
        const pointX = point[0]
        const pointY = point[1]
        // 提示框尺寸
        const boxWidth = size.contentSize[0]
        const boxHeight = size.contentSize[1]
        // 容器尺寸
        const viewWidth = size.viewSize[0]
        // const viewHeight = size.viewSize[1]
        // 设置光标左右位置
        if (viewWidth - boxWidth < pointX) {
          // 光标位置 大于 容器减去提示框的位置，右边放不下，放在左侧
          x = pointX - boxWidth
        } else {
          // 默认紧贴光标右侧显示
          x = pointX + 30
        }
        // 设置光标上下位置
        if (boxHeight < pointY) {
          // 光标位置 小于 提示框位置，上面放不下，放在下侧
          y = pointY - boxHeight
        } else {
          // 默认紧贴光标上侧显示
          y = pointY
        }
        return [x, y]
      },
    },
    legend: {
      icon: 'rect',
      orient: 'horizontal', // 横向显示图例
      pageIconColor: '#ff781f', // 设置翻页箭头颜色
      pageTextStyle: {
        color: '#fff' // 设置翻页数字颜色
      },
      pageIconSize: 11, // 设置翻页箭头大小
      textStyle: { // 设置图例文字的样式
        color: '#fff',
        fontSize: 12
      },
      itemHeight: 10, // 设置图例项的高度
      itemWidth: 15, // 设置图例项的宽度
      left: "0%",
      top: "50%",
      width: '95%',
      height: '70%', // 设置图例高度
      overflow: 'break',
      itemGap: 20,
      formatter: function (name) {
        // let percent = 0;
        // let total = 0;
        // for (let i = 0; i < props.data.length; i++) {
        //     total += props.data[i].value;
        // }
        // const item = props.data.filter((item) => item.name === name)[0];
        // percent = (
        //     (item.value / total) *
        //     100
        // ).toFixed(1);
        //  return `${name}：${percent}%`;
        return `${name}`;
      }
    },
    series: [
      {
        type: "pie",
        center: ["45%", "25%"], // 饼图位置
        radius: ["35%", "50%"],
        avoidLabelOverlap: false,
        // roseType:'radius',
        label: {
          show: true, // 显示标签
          position: "outside",
          textStyle: {
            color: '#fff' // 标签文字颜色
          }
        },
        emphasis: {
          label: {
            show: false,
            fontSize: 10,
            fontWeight: 'bold'
          }
        },
        itemStyle: {
          normal: {
            color: function (params) {
              return colorList[params.dataIndex];
            }
          }
        },
        labelLine: {
          show: true, // 显示折线
          length: 3, // 折线长度
          length2: 3 // 折线第二段长度
        },
        data: data
      }
    ]
  };
  return option
}

//活跃占比
export function getOptionsForRightpie(data1, total, title) {
  // console.log('---', data1, total)
  // console.log(((data1 / total * 100).toFixed(2)) )
  const option = {
    tooltip: {
      backgroundColor: "rgba(0,0,0,0)",
      borderColor: "rgba(0,0,0,0)",
      triggerOn: "mousemove",
      enterable: true,
      shadowBlur: 0,
      shadowColor: 'rgba(0, 0, 0, 0)',
      padding: [0],
      trigger: "item",
      textStyle: {
        color: '#fff', // 文本颜色
        fontSize: 24, // 文本大小
        fontWeight: 500,
      },
      formatter: "<span style='font-size:16px;'>{c}次</span>",
    },
    title: [
      {
        text: '{val|' + ((data1 / total * 100).toFixed(2)) + '%' + '}\n{name|' + title + '}',
        x: 'center',
        y: 'center',
        textStyle: {
          rich: {
            val: {
              fontSize: 26,
              fontWeight: 'bold',
              color: '#fff',
              padding: [-20, 0, 0, 0]
            },
            name: {
              fontSize: 14,
              fontWeight: 'bold',
              color: '#fff',
              padding: [5, 0, 0, 0],
            },
          },
        },
      },
    ],
    color: ['rgba(176, 212, 251, 1)'],
    series: [
      {
        type: 'pie',
        clockWise: true,
        radius: ['50%', '66%'],
        center: ['50%', '46%'],
        label: {
          show: true, // 显示标签
          position: 'outside', // 标签位置在外部
          formatter: '{b}', // 显示名称
          textStyle: {
            color: '#fff' // 标签文字颜色
          }
        },
        labelLine: {
          show: true, // 显示折线
          length: 20, // 折线长度
          length2: 30 // 折线第二段长度
        },
        itemStyle: {
          normal: {
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
          },
        },
        hoverAnimation: false,
        data: [
          {
            value: data1,
            name: '01',
            itemStyle: {
              normal: {
                color: '#4C98FF',
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
              },
            },
          },
          {
            name: '02',
            value: total,
            itemStyle: {
              normal: {
                color: 'rgba(255, 255, 255, 0.3)',
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
              },
            },
          },
        ],
      },
    ],
  };
  return option;
}

/**
 * 应用启动趋势
 * @param {Array} xData 
 * @param {Array} yData 
 * @param {Number} currentTab  1 昨日 2 近7日 3 近30日
 * @returns 
 */
export function getOptionsForLineBottom(xData, yData, currentTab) {
  var option = {
    tooltip: {
      trigger: 'item',
      confine: false,
      alwysShowContent: false,
      backgroundColor: "rgba(0,0,0,0)",
      borderColor: "rgba(0,0,0,0)",
      triggerOn: "mousemove",
      enterable: true,
      // 去掉阴影
      shadowBlur: 0,
      shadowColor: 'rgba(0, 0, 0, 0)',
      padding: [0],
      position: function (point, params, dom, rect, size) {
        // 提示框位置
        let x, y
        // 当前鼠标位置
        const titleBoxWidth = (document.querySelector('.puple-common-tip').offsetWidth) * 0.7
        const pointX = point[0] - titleBoxWidth
        const pointY = point[1] - 12
        // 提示框尺寸
        const boxWidth = size.contentSize[0]
        const boxHeight = size.contentSize[1]
        // 容器尺寸
        const viewWidth = size.viewSize[0]
        // const viewHeight = size.viewSize[1]
        // 设置光标左右位置
        if (viewWidth - boxWidth < pointX) {
          // 光标位置 大于 容器减去提示框的位置，右边放不下，放在左侧
          x = pointX
        } else {
          // 默认紧贴光标右侧显示
          x = pointX
        }
        // 设置光标上下位置
        if (boxHeight < pointY) {
          // 光标位置 小于 提示框位置，上面放不下，放在下侧
          y = pointY - boxHeight
          // window.tooltipLineSpace = true
        } else {
          // window.tooltipLineSpace = false
          // 默认紧贴光标上方显示
          y = pointY - 110
        }
        return [x, y]
      },
      formatter: (params) => {
        //  console.log(JSON.stringify(currentTab))
        //  ${currentTab=='1' ? `<p>${getDateRangeString().yesterday}</p>` : ``}
        //  ${currentTab=='2' ? `<p>${getDateRangeString().lastSevenDays.split('～')[0]}～</p><p>${getDateRangeString().lastSevenDays.split('～')[1]}</p>` : ``}
        //  ${currentTab=='3' ? `<p>${getDateRangeString().lastThirtyDays.split('～')[0]}～</p><p>${getDateRangeString().lastThirtyDays.split('～')[1]}</p>` : ``}
        // <p>${currentTab=='1'?(getDateRangeString().yesterday) : currentTab=='2' ? (getDateRangeString().lastSevenDays) : (getDateRangeString().lastThirtyDays)}</p>
        return `<div class="puple-common-tip">
                <div class="title">${params.name}</div> 
                <p><span class="total-box">${params.value ? Number(params.value).toLocaleString() : ''}</span>次</p>
              <div>`
      }
    },
    grid: {
      top: '15%',
      left: '5%',  // 设置左边距，根据实际情况调整
      right: '3%', // 设置右边距
      bottom: '5%', // 设置底部距离
      containLabel: true // 包含标签，确保标签不会被裁剪
    },
    xAxis: [{
      type: 'category',
      boundaryGap: false,
      // axisLine: { //坐标轴轴线相关设置。数学上的x轴
      //     show: false,
      //     lineStyle: {
      //         color: '#233653'
      //     },
      // },
      axisLabel: { //x坐标轴设置
        interval: 0, // 每隔两个标签显示一次
        rotate: currentTab == 3 ? 45 : 0,
        textStyle: {
          color: '#fff',
          padding: 16,
          fontSize: 16
        },
        formatter: function (data) {
          return data
        }
      },
      splitLine: {
        show: false,
        lineStyle: {
          color: '#276CC9'
        },
      },
      axisTick: {
        show: false,
      },
      data: xData
    }],
    yAxis: [{
      min: 0,
      splitLine: {
        show: true,
        lineStyle: {
          color: '#233653' //网格线颜色
        },
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: "#233653"
        }
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: '#fff', //y轴设置
          padding: 16,
          fontSize: 16
        },
        formatter: function (value) {
          if (value >= 10000) {
            return (value / 10000).toFixed(1).replace(/(\.0+$)/, "") + 'w';
          } else {
            return value.toLocaleString()
          }
        }
      },
      axisTick: {
        show: false,
      },
    }],
    series: [
      {
        name: '近7日',
        type: 'line',
        symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
        showAllSymbol: true,
        symbolSize: 14,
        // smooth: true,
        lineStyle: {
          normal: {
            width: 2,
            color: "rgba(72,160,243,1)", // 线条颜色
          },
        },
        itemStyle: {
          color: "rgba(72,160,243,1)",
        },
        areaStyle: {
          normal: {
            //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: "rgba(39,108,201,0.4)"
            },
            {
              offset: 1,
              color: "rgba(72,160,243,1)"
            }
            ], false),
          }
        },
        data: yData
      }
    ]
  };
  return option;
}

export function getOptionMap(list) {
  var option = {
    title: {
    },
    tooltip: {
      trigger: 'item',
      alwysShowContent: false,
      backgroundColor: "rgba(0,0,0,0)",
      borderColor: "rgba(0,0,0,0)",
      triggerOn: "mousemove",
      enterable: true,
      // 去掉阴影
      shadowBlur: 0,
      shadowColor: 'rgba(0, 0, 0, 0)',
      padding: [0],
      position: function (point, params, dom, rect, size) {
        if (params.name === "南海诸岛") return
        // 提示框位置
        let x, y
        // 当前鼠标位置
        const titleBoxWidth = (document.querySelector('.map-tool-tip').offsetWidth)
        const pointX = point[0] - titleBoxWidth
        const pointY = point[1] - 30
        // 提示框尺寸
        const boxWidth = size.contentSize[0]
        const boxHeight = size.contentSize[1]
        // 容器尺寸
        const viewWidth = size.viewSize[0]
        // const viewHeight = size.viewSize[1]
        // 设置光标左右位置
        if (viewWidth - boxWidth < pointX) {
          // 光标位置 大于 容器减去提示框的位置，右边放不下，放在左侧
          x = pointX - boxWidth
        } else {
          // 默认紧贴光标右侧显示
          x = pointX + 30
        }
        // 设置光标上下位置
        if (boxHeight < pointY) {
          // 光标位置 小于 提示框位置，上面放不下，放在下侧
          y = pointY - boxHeight
        } else {
          // 默认紧贴光标上侧显示
          y = pointY - 120
        }
        // 记录提示框位置
        // if (window.tooltipSpace?.position) window.tooltipSpace.position = [x, y]
        return [x, y]
      },
      formatter: (params) => {
        if (params.name === "南海诸岛") return
        return `<div class="map-tool-tip">
                  <div class="title">${params.name}</div> 
                  <p>启动总量：100个</p>
                  <p class="last-item">近期新增：${params.data ? params.data.value : ''}</p>
                <div>`
      }
    },
    toolbox: {
      show: false,
      orient: 'vertical',
      left: 'right',
      top: 'center',
      feature: {
        dataView: { readOnly: false },
        restore: {},
        saveAsImage: {}
      }
    },
    visualMap: {
      min: 0,
      max: 1000,
      left: '86%', //手柄位移
      top: '47%',
      textStyle: {
        color: '#fff'
      },
      realtime: false,
      calculable: false,
      inRange: {
        color: ['#55a4f7', '#7ad7e1', '#e1c968', '#e7453c']
      }
    },
    geo: [{
      map: 'china',
      // aspectScale: 0.7,
      layoutCenter: ['50%', '50%'],
      center: [106, 33.95], //地图位置
      layoutSize: '100%',
      silent: true,
      roam: false,
      itemStyle: {
        normal: {
          // shadowColor: '#296281',
          shadowOffsetX: 0,
          shadowOffsetY: 5, //投影大小
        },
        emphasis: { // 这个是鼠标移上去就会选中的样式，鼠标mouseover
          areaColor: '#276fce',
          borderWidth: 0,
        },
      },
      zoom: 1.1,
    }],
    series: [
      {
        name: '中国',
        type: 'map',
        map: 'china',
        roam: false,
        zoom: 1.1,
        center: [106, 34],
        layoutCenter: ["50%", "50%"], //地图位置
        layoutSize: '100%',
        label: {
          show: false,
          emphasis: {
            show: false
          }
        },
        itemStyle: {
          normal: {
            areaColor: '#649cf2', //默认地图块颜色
            borderColor: '#000', //地图边线颜色
            borderWidth: 0.5, //地图边线粗细
          },
          emphasis: {
            areaColor: 'yellow' //鼠标悬停颜色
          }
        },
        data: list,
      },
      {
        name: '南海诸岛',
        type: 'scatter',
        coordinateSystem: 'geo',
        data: [], // 将数据设置为空数组，不显示任何点
      }
    ]
  }
  return option
}